<template>
  <el-form-item :prop="prop" :label="label">
    <el-input
      v-model="value"
      :maxlength="maxlength"
      :minlength="minlength"
      :placeholder="placeholder"
      :clearable="clearable"
      :show-password="showPassword"
      :disabled="disabled"
      :type="type"
      :show-word-limit="showWordLimit"
      :input-style="inputStyle"
      @blur="handleBlur"
      @focus="handleFocus"
      @change="handleChange"
      @input="handleInput"
      @clear="handleClear"
    >
    </el-input>
  </el-form-item>
</template>

<script setup lang="ts" name="BaseInput">
import { computed } from "vue";
let props = withDefaults(
  defineProps<{
    prop?: string;
    label?: string;
    placeholder?: string;
    clearable?: boolean;
    disabled?: boolean;
    showPassword?: boolean;
    maxlength?: number;
    minlength?: number;
    showWordLimit?: boolean;
    type?: string;
    inputStyle?: objectType<any>;
    modelValue: any;
  }>(),
  {
    modelValue: "",
    type: "text",
    placeholder: "请输入",
  }
);
let emits = defineEmits([
  "input",
  "blur",
  "change",
  "clear",
  "focus",
  "update:modelValue",
]);

const value = computed({
  // 重新定义
  get: () => props.modelValue,
  set: (value: string) => emits("update:modelValue", value),
});

// 失焦时间
function handleBlur(event: FocusEvent) {
  emits("blur", event);
}
// 获得焦点事件
function handleFocus(event: FocusEvent) {
  emits("focus", event);
}
// 内容改变事件
function handleChange(val: any) {
  emits("change", val);
}
// input 事件
function handleInput(val: any) {
  emits("input", val);
}
// 清除内容事件
function handleClear() {
  emits("clear", "");
}
</script>

<style lang="less" scoped>
.container {
}
</style>
